<template>
    <div class="dashboard-container">
        <!-- 顶部欢迎区域 -->
        <div class="welcome-section">
            <el-row :gutter="20">
                <el-col :xs="24" :sm="24" :md="18">
                    <div class="welcome-card">
                        <div class="welcome-content">
                            <h2>{{ adminInfo.nickname + t('utils.comma') + getGreet() }}</h2>
                            <p>{{ state.remark }}</p>
                        </div>
                        <div class="welcome-image">
                            <img :src="headerSvg" alt="welcome" />
                        </div>
                    </div>
                </el-col>
                <el-col :xs="24" :sm="24" :md="6" class="work-status-col">
                    <div class="work-status-card">
                        <div class="work-status-content">
                            <div class="work-time">
                                <el-icon><Timer /></el-icon>
                                <span>{{ t('dashboard.You have worked today') }}</span>
                                <span class="time">{{ state.workingTimeFormat }}</span>
                            </div>
                            <el-button type="primary" @click="onChangeWorkState()">
                                <el-icon>
                                    <component :is="state.pauseWork ? VideoPlay : Coffee" />
                                </el-icon>
                                {{ state.pauseWork ? t('dashboard.Continue to work') : t('dashboard.have a bit of rest') }}
                            </el-button>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>

        <!-- 数据概览卡片 -->
        <div class="data-overview">
            <el-row :gutter="20">
                <el-col :xs="24" :sm="12" :md="12" :lg="6" v-for="(item, index) in dataCards" :key="index">
                    <el-card shadow="hover" class="data-card">
                        <div class="data-card-content">
                            <div class="data-icon">
                                <el-icon><component :is="item.icon" /></el-icon>
                            </div>
                            <div class="data-info">
                                <div class="data-title">{{ item.title }}</div>
                                <div class="data-value">
                                    <el-statistic :value="item.value" :value-style="statisticValueStyle" />
                                    <div class="data-trend">
                                        <el-icon :color="item.trend >= 0 ? '#67C23A' : '#F56C6C'">
                                            <component :is="item.trend >= 0 ? ArrowUp : ArrowDown" />
                                        </el-icon>
                                        <span :style="{ color: item.trend >= 0 ? '#67C23A' : '#F56C6C' }"> {{ Math.abs(item.trend) }}% </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>

        <!-- 访问趋势图表 -->
        <div class="charts-section">
            <el-row :gutter="20">
                <el-col :xs="24" :sm="24" :md="24">
                    <el-card shadow="hover" class="chart-card">
                        <template #header>
                            <div class="chart-header">
                                <span>{{ t('dashboard.Visit Trend Analysis') }}</span>
                            </div>
                        </template>
                        <div class="visit-trend-chart" ref="visitTrendChartRef"></div>
                    </el-card>
                </el-col>
            </el-row>
        </div>

        <!-- 实时访问统计 -->
        <div class="realtime-section">
            <el-row :gutter="20">
                <el-col :xs="24" :sm="24" :md="16">
                    <el-card shadow="hover" class="chart-card">
                        <template #header>
                            <div class="chart-header">
                                <span>{{ t('dashboard.Real-time Visit Statistics') }}</span>
                                <div class="realtime-update-info">
                                    <el-tag type="success">{{ t('dashboard.Real-time Update') }}</el-tag>
                                    <div class="countdown-timer">
                                        <el-icon><Timer /></el-icon>
                                        <span>{{ state.updateCountdown }}s</span>
                                    </div>
                                </div>
                            </div>
                        </template>
                        <div class="realtime-chart" ref="realtimeChartRef"></div>
                    </el-card>
                </el-col>
                <el-col :xs="24" :sm="24" :md="8">
                    <el-card shadow="hover" class="chart-card">
                        <template #header>
                            <div class="chart-header">
                                <span>{{ t('dashboard.Visit Source Distribution') }}</span>
                            </div>
                        </template>
                        <div class="source-chart" ref="sourceChartRef"></div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useEventListener, useTemplateRefsList, useTransition } from '@vueuse/core'
import * as echarts from 'echarts'
import { CSSProperties, nextTick, onActivated, onBeforeMount, onMounted, onUnmounted, reactive, toRefs, watch, ref, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import headerSvg from '/@/assets/dashboard/header-1.svg'
import { useAdminInfo } from '/@/stores/adminInfo'
import { WORKING_TIME } from '/@/stores/constant/cacheKey'
import { useNavTabs } from '/@/stores/navTabs'
import { fullUrl, getGreet } from '/@/utils/common'
import { index } from '/@/api/backend/dashboard'
import { Local } from '/@/utils/storage'
import { Timer, Histogram, View, Calendar, DataLine, ArrowUp, ArrowDown, VideoPlay, Coffee } from '@element-plus/icons-vue'
import { startCase } from 'lodash-es'

let workTimer: ReturnType<typeof setInterval>
let charts: echarts.ECharts[] = []

defineOptions({
    name: 'dashboard',
})

const d = new Date()
const { t } = useI18n()
const navTabs = useNavTabs()
const adminInfo = useAdminInfo()

const visitTrendChartRef = ref<HTMLElement>()
const realtimeChartRef = ref<HTMLElement>()
const sourceChartRef = ref<HTMLElement>()

const state: {
    charts: any[]
    remark: string
    workingTimeFormat: string
    pauseWork: boolean
    yesterday_trend: number
    today_trend: number
    month_trend: number
    total_trend: number
    startTime: number
    week_visits: number[]
    week_growth_rates: string[]
    hourly_visits: number[]
    updateCountdown: number
} = reactive({
    charts: [],
    remark: 'dashboard.Loading',
    workingTimeFormat: '00:00:00',
    pauseWork: false,
    yesterday_trend: 5,
    today_trend: 15,
    month_trend: 8,
    total_trend: 100,
    startTime: Date.now(),
    week_visits: [150, 230, 224, 218, 135, 147, 260],
    week_growth_rates: ['+20', '+32', '-18', '-5', '+25', '+38', '+40'],
    hourly_visits: [120, 82, 201, 234, 190, 330, 410, 320],
    updateCountdown: 60,
})

const chartTimeRange = ref('week')

/**
 * 带有数字向上变化特效的数据
 */
const countUp = reactive({
    userRegNumber: 325,
    fileNumber: 189,
    usersNumber: 2910,
    addonsNumber: 16204,
})

index().then((res) => {
    state.remark = res.data.remark

    // 在数据加载完成后初始化图表
    nextTick(() => {
        initCharts()
    })
})

const countUpRefs = toRefs(countUp)
const userRegNumberOutput = useTransition(countUpRefs.userRegNumber, { duration: 1500 })
const fileNumberOutput = useTransition(countUpRefs.fileNumber, { duration: 1500 })
const usersNumberOutput = useTransition(countUpRefs.usersNumber, { duration: 1500 })
const addonsNumberOutput = useTransition(countUpRefs.addonsNumber, { duration: 1500 })
const statisticValueStyle: CSSProperties = {
    fontSize: '28px',
}

/**
 * ========================================================
 * 实时访问统计数据获取指南
 * ========================================================
 *
 * 要实现实时访问统计功能，需要对接time接口获取实时数据。
 * 接口返回的数据格式为：
 * {
 *   "code": 1,
 *   "msg": "",
 *   "time": 1742480492,
 *   "data": {
 *     "hourly_visits": {
 *       "0": 1,   // 0点访问量
 *       "3": 0,   // 3点访问量
 *       "6": 0,   // 6点访问量
 *       "9": 1,   // 9点访问量
 *       "12": 0,  // 12点访问量
 *       "15": 1,  // 15点访问量
 *       "18": 2,  // 18点访问量
 *       "21": 0   // 21点访问量
 *     }
 *   }
 * }
 *
 * 以下是实现实时数据获取与更新的步骤：
 *
 * 1. 在script标签开头导入time接口
 * import { time } from '/@/api/backend/dashboard'
 *
 * 2. 添加定时器变量
 * let realtimeTimer: ReturnType<typeof setInterval>
 * let countdownTimer: ReturnType<typeof setInterval>
 *
 * 3. 实现获取实时数据的方法
 * const fetchRealtimeData = () => {
 *   // 重置倒计时
 *   state.updateCountdown = 60
 *
 *   time()
 *     .then((res: any) => {
 *       if (res.code === 1) {
 *         if (res.data && res.data.hourly_visits) {
 *           // 将对象转换为数组并确保是数字类型
 *           // hourly_visits是一个对象，键为小时(0,3,6,9,12,15,18,21)，值为访问量
 *           const visits = Object.values(res.data.hourly_visits).map((v) => Number(v))
 *           state.hourly_visits = visits
 *           updateRealtimeChart()
 *         }
 *       }
 *     })
 *     .catch((error) => {
 *       console.error('获取实时数据失败:', error)
 *     })
 * }
 *
 * 4. 添加更新倒计时的方法
 * const updateCountdown = () => {
 *   if (state.updateCountdown > 0) {
 *     state.updateCountdown--
 *   } else {
 *     // 倒计时结束时，重新获取数据
 *     fetchRealtimeData()
 *   }
 * }
 *
 * 5. 在onMounted生命周期中设置定时器
 * onMounted(() => {
 *   // ... 其他代码
 *
 *   // 获取初始实时数据并立即显示
 *   fetchRealtimeData()
 *
 *   // 启动实时数据更新定时器（每1分钟更新一次）
 *   realtimeTimer = setInterval(fetchRealtimeData, 60 * 1000)
 *
 *   // 启动倒计时更新（每秒更新一次）
 *   countdownTimer = setInterval(updateCountdown, 1000)
 * })
 *
 * 6. 在onUnmounted生命周期中清除定时器
 * onUnmounted(() => {
 *   // ... 其他代码
 *   clearInterval(realtimeTimer)
 *   clearInterval(countdownTimer)
 * })
 *
 * 注意事项：
 * 1. state对象中需要有hourly_visits数组和updateCountdown计数器
 * 2. 确保time接口已在API文件中正确定义
 * 3. 定时器间隔可根据实际需求调整
 * 4. 处理接口异常情况，避免图表显示错误
 */

// 更新实时访问图表
const updateRealtimeChart = () => {
    if (!realtimeChartRef.value) {
        return
    }

    try {
        const realtimeChart = echarts.getInstanceByDom(realtimeChartRef.value) || echarts.init(realtimeChartRef.value)
        const option = {
            tooltip: {
                trigger: 'axis',
                formatter: '{b}<br />{a}: {c}',
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true,
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00'],
            },
            yAxis: {
                type: 'value',
                name: t('dashboard.Visits'),
                min: 0,
                minInterval: 1,
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#409EFF',
                    },
                },
            },
            series: [
                {
                    name: t('dashboard.Visits'),
                    type: 'line',
                    smooth: true,
                    showSymbol: true,
                    symbolSize: 8,
                    data: state.hourly_visits,
                    itemStyle: {
                        color: '#409EFF',
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: 'rgba(64,158,255,0.3)' },
                            { offset: 1, color: 'rgba(64,158,255,0.1)' },
                        ]),
                    },
                    emphasis: {
                        focus: 'series',
                        scale: true,
                    },
                },
            ],
        }
        realtimeChart.setOption(option, true)
    } catch (error) {
        console.error('更新图表时发生错误:', error)
    }
}

// 初始化图表
const initCharts = () => {
    // 清除旧的图表实例
    disposeCharts()
    charts = []

    // 访问趋势图表
    if (visitTrendChartRef.value) {
        const visitTrendChart = echarts.init(visitTrendChartRef.value)
        const option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985',
                    },
                },
            },
            legend: {
                data: [t('dashboard.Visits'), t('dashboard.Rate')],
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true,
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: [
                    t('dashboard.Monday'),
                    t('dashboard.Tuesday'),
                    t('dashboard.Wednesday'),
                    t('dashboard.Thursday'),
                    t('dashboard.Friday'),
                    t('dashboard.Saturday'),
                    t('dashboard.Sunday'),
                ],
            },
            yAxis: [
                {
                    type: 'value',
                    name: t('dashboard.Visits'),
                    position: 'left',
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#409EFF',
                        },
                    },
                },
                {
                    type: 'value',
                    name: t('dashboard.Rate'),
                    position: 'right',
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#67C23A',
                        },
                    },
                    axisLabel: {
                        formatter: '{value}%',
                    },
                },
            ],
            series: [
                {
                    name: t('dashboard.Visits'),
                    type: 'line',
                    smooth: true,
                    showSymbol: true,
                    symbolSize: 8,
                    data: state.week_visits,
                    itemStyle: {
                        color: '#409EFF',
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: 'rgba(64,158,255,0.3)' },
                            { offset: 1, color: 'rgba(64,158,255,0.1)' },
                        ]),
                    },
                    emphasis: {
                        focus: 'series',
                        scale: true,
                    },
                },
                {
                    name: t('dashboard.Rate'),
                    type: 'line',
                    yAxisIndex: 1,
                    smooth: true,
                    showSymbol: true,
                    symbolSize: 8,
                    data: state.week_growth_rates.map((rate) => parseFloat(rate.replace('+', ''))),
                    itemStyle: {
                        color: '#67C23A',
                    },
                    emphasis: {
                        focus: 'series',
                        scale: true,
                    },
                },
            ],
        }
        visitTrendChart.setOption(option)
        charts.push(visitTrendChart)
    }

    // 实时访问统计图表
    if (realtimeChartRef.value) {
        const realtimeChart = echarts.init(realtimeChartRef.value)
        realtimeChart.setOption({
            tooltip: {
                trigger: 'axis',
                formatter: '{b}<br />{a}: {c}',
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true,
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00'],
            },
            yAxis: {
                type: 'value',
                name: t('dashboard.Visits'),
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#409EFF',
                    },
                },
            },
            series: [
                {
                    name: t('dashboard.Visits'),
                    type: 'line',
                    smooth: true,
                    showSymbol: true,
                    symbolSize: 8,
                    data: state.hourly_visits,
                    itemStyle: {
                        color: '#409EFF',
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: 'rgba(64,158,255,0.3)' },
                            { offset: 1, color: 'rgba(64,158,255,0.1)' },
                        ]),
                    },
                    emphasis: {
                        focus: 'series',
                        scale: true,
                    },
                },
            ],
        })
        charts.push(realtimeChart)
    }

    // 访问来源分布图表
    if (sourceChartRef.value) {
        const sourceChart = echarts.init(sourceChartRef.value)
        sourceChart.setOption({
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)',
            },
            legend: {
                orient: 'vertical',
                left: 10,
                top: 'center',
            },
            series: [
                {
                    name: t('dashboard.Visit Source Distribution'),
                    type: 'pie',
                    radius: ['50%', '70%'],
                    center: ['60%', '50%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2,
                    },
                    label: {
                        show: false,
                        position: 'center',
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '20',
                            fontWeight: 'bold',
                        },
                    },
                    labelLine: {
                        show: false,
                    },
                    data: [
                        { value: 1048, name: t('dashboard.Search Engine'), itemStyle: { color: '#409EFF' } },
                        { value: 735, name: t('dashboard.Direct Visit'), itemStyle: { color: '#67C23A' } },
                        { value: 580, name: t('dashboard.Email Marketing'), itemStyle: { color: '#E6A23C' } },
                        { value: 484, name: t('dashboard.Affiliate Advertising'), itemStyle: { color: '#F56C6C' } },
                        { value: 300, name: t('dashboard.Video Advertising'), itemStyle: { color: '#909399' } },
                    ],
                },
            ],
        })
        charts.push(sourceChart)
    }
}

// 销毁所有图表实例
const disposeCharts = () => {
    charts.forEach((chart) => {
        chart.dispose()
    })
    charts = []
}

// 格式化时间
const formatTime = (seconds: number): string => {
    const hours = Math.floor(seconds / 3600)
    const minutes = Math.floor((seconds % 3600) / 60)
    const remainingSeconds = seconds % 60

    return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`
}

// 更新工作时间
const updateWorkingTime = () => {
    const currentTime = Date.now()
    const elapsedSeconds = Math.floor((currentTime - state.startTime) / 1000)
    state.workingTimeFormat = formatTime(elapsedSeconds)
}

// 监听图表时间范围变化
watch(chartTimeRange, (newValue) => {
    nextTick(() => {
        initCharts()
    })
})

// 手动更新倒计时（每秒减1，用于显示）
const updateCountdown = () => {
    setInterval(() => {
        if (state.updateCountdown > 0) {
            state.updateCountdown--
        } else {
            state.updateCountdown = 60
        }
    }, 1000)
}

// 添加窗口大小变化监听
const resizeHandler = () => {
    charts.forEach((chart) => chart.resize())
}

onMounted(() => {
    // 启动工作时间计时器
    workTimer = setInterval(updateWorkingTime, 1000)

    // 初始化图表
    nextTick(() => {
        initCharts()
    })

    // 启动倒计时更新
    updateCountdown()

    // 添加窗口大小变化监听
    window.addEventListener('resize', resizeHandler)
})

// 在组件激活时初始化图表，如果需要的话
onActivated(() => {
    // 仅当图表实例不存在时初始化
    if (charts.length === 0) {
        nextTick(() => {
            initCharts()
        })
    }
})

// 在组件卸载时清理资源
onUnmounted(() => {
    clearInterval(workTimer)
    window.removeEventListener('resize', resizeHandler)
    disposeCharts()
})

// 工作状态切换
const onChangeWorkState = () => {
    state.pauseWork = !state.pauseWork
    if (state.pauseWork) {
        clearInterval(workTimer)
    } else {
        state.startTime = Date.now() - (Date.now() - state.startTime) // 保持暂停前的时间
        workTimer = setInterval(updateWorkingTime, 1000)
    }
}

// 数据卡片配置
const dataCards = computed(() => [
    {
        title: t('dashboard.Yesterday Visits'),
        icon: Histogram,
        value: userRegNumberOutput.value,
        trend: state.yesterday_trend,
    },
    {
        title: t('dashboard.Today Visits'),
        icon: View,
        value: fileNumberOutput.value,
        trend: state.today_trend,
    },
    {
        title: t('dashboard.This Month Visits'),
        icon: Calendar,
        value: usersNumberOutput.value,
        trend: state.month_trend,
    },
    {
        title: t('dashboard.Total Visits'),
        icon: DataLine,
        value: addonsNumberOutput.value,
        trend: state.total_trend,
    },
])
</script>

<style lang="scss" scoped>
.dashboard-container {
    padding: 20px;
    min-height: 100vh;

    @media screen and (max-width: 768px) {
        padding: 10px;
    }

    .welcome-section {
        margin-bottom: 20px;

        @media screen and (max-width: 768px) {
            margin-bottom: 15px;
        }

        .welcome-card,
        .work-status-card {
            height: 128px; // 设置固定高度，使两个卡片高度一致
            display: flex;
            flex-direction: column;
            justify-content: center;

            @media screen and (max-width: 1200px) {
                height: auto;
                min-height: 128px;
            }
        }

        .welcome-card {
            background: linear-gradient(135deg, #1890ff 0%, #36cfc9 100%);
            border-radius: 8px;
            padding: 24px;
            color: white;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;

            @media screen and (max-width: 768px) {
                padding: 16px;
                flex-direction: column;
                text-align: center;
                gap: 16px;
                height: auto;
            }

            .welcome-content {
                h2 {
                    margin: 0 0 12px 0;
                    font-size: 24px;

                    @media screen and (max-width: 768px) {
                        font-size: 20px;
                    }
                }

                p {
                    margin: 0;
                    opacity: 0.8;
                }
            }

            .welcome-image {
                img {
                    height: 80px;

                    @media screen and (max-width: 768px) {
                        height: 60px;
                    }
                }
            }
        }

        .work-status-col {
            @media screen and (max-width: 768px) {
                display: none;
            }
        }

        .work-status-card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            position: relative;
            overflow: hidden;

            @media screen and (max-width: 1200px) {
                padding: 16px;
            }

            @media screen and (max-width: 768px) {
                margin-top: 15px;
                min-height: 140px;
                display: flex;
                align-items: center;
            }

            &::before {
                content: '';
                position: absolute;
                top: 0;
                right: 0;
                width: 120px;
                height: 120px;
                background: url('/@/assets/dashboard/coffee.svg') no-repeat center;
                background-size: contain;
                opacity: 0.1;
                transform: translate(20px, -20px);

                @media screen and (max-width: 768px) {
                    width: 100px;
                    height: 100px;
                    transform: translate(10px, -10px);
                    opacity: 0.05;
                }
            }

            .work-status-content {
                display: flex;
                flex-direction: column;
                gap: 20px;
                position: relative;
                z-index: 1;
                width: 100%;

                @media screen and (max-width: 1200px) {
                    gap: 15px;
                }

                @media screen and (max-width: 768px) {
                    gap: 12px;
                }

                .work-time {
                    display: flex;
                    align-items: center;
                    flex-wrap: wrap;
                    gap: 8px;
                    color: #606266;
                    padding: 12px;
                    background: #f5f7fa;
                    border-radius: 6px;
                    transition: all 0.3s ease;
                    min-height: 44px;

                    @media screen and (max-width: 1200px) {
                        padding: 10px;
                        flex-direction: row;
                        justify-content: space-between;
                        width: 100%;
                    }

                    @media screen and (max-width: 768px) {
                        justify-content: space-between;

                        span:not(.time) {
                            flex: 1;
                            min-width: 0;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                    }

                    &:hover {
                        background: #ecf5ff;
                    }

                    .el-icon {
                        font-size: 20px;
                        color: #409eff;
                        flex-shrink: 0;

                        @media screen and (max-width: 768px) {
                            font-size: 18px;
                        }
                    }

                    span {
                        @media screen and (max-width: 1200px) {
                            font-size: 14px;
                        }

                        @media screen and (max-width: 768px) {
                            font-size: 13px;
                        }
                    }

                    .time {
                        font-weight: bold;
                        color: #409eff;
                        font-size: 18px;
                        font-family: 'Monaco', monospace;
                        margin-left: auto;
                        flex-shrink: 0;

                        @media screen and (max-width: 1200px) {
                            font-size: 16px;
                        }

                        @media screen and (max-width: 768px) {
                            font-size: 15px;
                            margin-left: 0;
                        }
                    }
                }

                .el-button {
                    width: 100%;
                    height: 40px;
                    border-radius: 6px;
                    font-size: 14px;
                    transition: all 0.3s ease;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;

                    @media screen and (max-width: 1200px) {
                        font-size: 13px;
                        padding: 8px 12px;
                        height: 36px;
                    }

                    @media screen and (max-width: 768px) {
                        padding: 8px 15px;
                    }

                    &:hover {
                        transform: translateY(-2px);
                        box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
                    }

                    .el-icon {
                        margin-right: 6px;
                        font-size: 16px;

                        @media screen and (max-width: 1200px) {
                            font-size: 15px;
                            margin-right: 4px;
                        }

                        @media screen and (max-width: 768px) {
                            font-size: 14px;
                        }
                    }
                }
            }
        }
    }

    .data-overview {
        margin-bottom: 20px;

        @media screen and (max-width: 768px) {
            margin-bottom: 15px;

            :deep(.el-col) {
                margin-bottom: 10px;

                &:last-child {
                    margin-bottom: 0;
                }
            }
        }

        .data-card {
            margin-bottom: 0;
            transition: transform 0.3s ease;

            &:hover {
                transform: translateY(-2px);
            }

            .data-card-content {
                display: flex;
                align-items: center;
                gap: 16px;

                @media screen and (max-width: 768px) {
                    gap: 10px;
                }

                .data-icon {
                    width: 48px;
                    height: 48px;
                    border-radius: 8px;
                    background: #ecf5ff;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-shrink: 0;

                    @media screen and (max-width: 768px) {
                        width: 36px;
                        height: 36px;
                    }

                    .el-icon {
                        font-size: 24px;
                        color: #409eff;

                        @media screen and (max-width: 768px) {
                            font-size: 18px;
                        }
                    }
                }

                .data-info {
                    flex: 1;
                    min-width: 0;

                    .data-title {
                        font-size: 14px;
                        color: #909399;
                        margin-bottom: 8px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;

                        @media screen and (max-width: 768px) {
                            font-size: 12px;
                            margin-bottom: 4px;
                        }
                    }

                    .data-value {
                        display: flex;
                        align-items: baseline;
                        gap: 8px;
                        flex-wrap: wrap;

                        @media screen and (max-width: 768px) {
                            gap: 6px;
                        }

                        :deep(.el-statistic__content) {
                            @media screen and (max-width: 768px) {
                                font-size: 20px !important;
                            }
                        }

                        .data-trend {
                            display: flex;
                            align-items: center;
                            gap: 4px;
                            font-size: 14px;
                            white-space: nowrap;

                            @media screen and (max-width: 768px) {
                                font-size: 12px;
                            }

                            .el-icon {
                                @media screen and (max-width: 768px) {
                                    font-size: 12px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    .charts-section,
    .realtime-section {
        margin-bottom: 20px;

        @media screen and (max-width: 768px) {
            margin-bottom: 15px;

            :deep(.el-col) {
                margin-bottom: 15px;

                &:last-child {
                    margin-bottom: 0;
                }
            }
        }

        .chart-card {
            .chart-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 12px 15px;

                @media screen and (max-width: 768px) {
                    flex-direction: column;
                    align-items: flex-start;
                    gap: 10px;
                }

                span {
                    font-size: 16px;
                    font-weight: 500;

                    @media screen and (max-width: 768px) {
                        font-size: 14px;
                    }
                }

                .realtime-update-info {
                    display: flex;
                    align-items: center;
                    gap: 10px;

                    .countdown-timer {
                        display: flex;
                        align-items: center;
                        gap: 4px;
                        background-color: var(--el-fill-color-light);
                        padding: 4px 8px;
                        border-radius: 4px;
                        font-size: 12px;
                        color: var(--el-text-color-secondary);

                        .el-icon {
                            font-size: 14px;
                            color: var(--el-color-primary);
                        }
                    }
                }
            }

            .visit-trend-chart,
            .realtime-chart,
            .source-chart {
                width: 100%;
                height: 400px;

                @media screen and (max-width: 768px) {
                    height: 300px;
                }
            }
        }
    }

    .notice-list {
        .notice-item {
            display: flex;
            align-items: flex-start;
            padding: 12px 0;
            cursor: pointer;
            transition: background-color 0.2s ease;
            border-bottom: 1px solid var(--el-border-color-lighter);

            &:last-child {
                border-bottom: none;
            }

            &:hover {
                background-color: var(--el-fill-color-light);
            }
        }

        .notice-avatar {
            margin-right: 12px;
            flex-shrink: 0;
        }

        .notice-content {
            flex: 1;
            min-width: 0;

            .notice-title {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 4px;

                .name {
                    font-size: 14px;
                    font-weight: 500;
                    color: var(--el-text-color-primary);
                }

                .time {
                    font-size: 12px;
                    color: var(--el-text-color-secondary);
                }
            }

            .notice-text {
                font-size: 13px;
                color: var(--el-text-color-regular);
                line-height: 1.5;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }
        }
    }

    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}
</style>
